<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24"
			        style="text-align: right;margin-left:-10px;">
			        <el-button type="primary"
				           size="small"
				           @click.native.prevent="add()" v-if="serieslabel">新增</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="edit()">编辑</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6"
			        style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData"
				         :filter-node-method="filterNode"
				         :highlight-current=true
				         :props="defaultProps"
				         accordion
				         @node-click="handleNodeClick"
				         :auto-expand-parent=false
				         ref="dictTree"
				         node-key="id"></el-tree>
			</el-col>
			<el-col :span="18"
			        style="padding-right: 0px!important;padding-left: 0px!important;">
			        <el-table :data="params.dataList" border style="width: 100%;align-content: center;"  @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="60" >
							</el-table-column>
							<el-table-column label="品牌" prop="bName">
							</el-table-column>
							<el-table-column label="车系" prop="carSeriesName">
							</el-table-column>
							<el-table-column label="车型" prop="model" >
							</el-table-column>
							<el-table-column label="配置" prop="configure">
							</el-table-column>
							<el-table-column label="预警类型" prop="warningType" :formatter="convertWarningType">
							</el-table-column>
							<el-table-column label="最小值" prop="min" >
							</el-table-column>
							<el-table-column label="最大值" prop="max">
							</el-table-column>
						</el-table>
				<el-pagination small
				               @size-change="handleCurrentChange"
				               @current-change="handleGroupCurrentChange"
				               :current-page="curPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="params.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--字典表单 -->
		<el-dialog title="车型保额预警"
		           v-model="dictFormShow">
			<el-form :model="dictFormData"
			         ref="dictForm"
			         label-width="100px">
				<el-form-item label="品牌"
				              prop="brand">
					<el-input size="small"
						      :maxlength="200"
					          v-model="brandlabel"
					          readonly></el-input>
				</el-form-item>
				<el-form-item label="车系"
				              prop="series"
				              >
					<el-input size="small"
						      :maxlength="200"
					          placeholder="车系"
					          v-model="serieslabel" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="车型"
				              prop="model">
	              <el-select size="small"
		           v-model="dictFormData.modelId"
		           style="margin-left: -2px;"
		           placeholder="请选择车型" @change="modelchange">
						<el-option v-for="item in modelData" :label="item.label"
						           :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="配置"
				              prop="configure" v-if="dictFormData.model">
					<el-select size="small"
					           v-model="dictFormData.configureId"
					           style="margin-left: -2px;"
					           placeholder="请选择配置" 
					           @change="configValue">
						<el-option v-for="item in configureData" :label="item.label"
						           :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="最小值"
				              prop="min"
				              required>
				    <el-input-number  v-model="dictFormData.min" :min="1"></el-input-number>         
				</el-form-item>
				<el-form-item label="最大值"
				              prop="max"
				              required>
				    <el-input-number v-model="dictFormData.max" :min="1"></el-input-number>         
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="dictFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveDict">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//分页设置
			page: this.page,
			//当前分组页
			curPage: 1,
			params: {
				dataList: [],
				total: 0
			},
			//查询条件-状态
			dictStatus: '',
			//字典树的过滤条件
			dictTreeSearchValue: '',
			//树型数据配置
			defaultProps: {
				children: 'child',
				label: 'label'
			},
			//树型数据
			paramTreeData: [],
			//子菜单表格数据
			paramTabelData: [],
			//子系统下级
			sysChild: [],
			//模块下级
			moduleChild: [],
			//功能下级
			funcChild: [],
			//资源类型下拉数据
			resTypeComboData: [],
			//资源表单是否显示
			paraFormShow: false,
			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],
			//字典表单
			dictFormShow: false,
			dictEmptyData: {
				id: "",
				max:'',
				min:'',
				brand:'',
				model:'',
				modelId:'',
				series:'',
				configure:'',
				configureId:'',
				warningType:''
			},
			//保存数据
			dictFormData: {
				id: "",
				max:'',
				min:'',
				brand:'',
				model:'',
				modelId:'',
				series:'',
				configure:'',
				configureId:'',
				warningType:''
			},
			queryData:{
				//品牌
				brand:'',
				//车型
				series:''
			},
			brandlabel:'',
			serieslabel:'',
			seriesId:'',
			//车型数据
			modelData:[],
			//配置数据
			configureData:[],
		}
	},
	methods: {
		//保存configValue
		configValue: function(){
			debugger;
			for(var i=0;i<this.$data.configureData.length ;i++){
				if(this.$data.configureData[i].value == this.$data.dictFormData.configureId)
				{
					this.$data.dictFormData.configure = this.$data.configureData[i].label;
				    break;
				}
			}
		},
		//分页查询
		handleCurrentChange: function () { },
		//字典分组,当前页切换
		handleGroupCurrentChange: function (currentPage) {
			this.$data.curPage = currentPage;
			this.queryParamGrid();
		},
		//点击资源树节点
		handleNodeClick(data) {
			debugger;
//			console.error(JSON.stringify(data.label));
			if(data.type=='0'){
				this.$data.queryData.brand='';
			    this.$data.brandlabel='';
//				this.$data.dictFormData = Object.assign(this.$data.dictFormData, this.$data.dictEmptyData);
				this.$data.queryData.brand = data.value;//品牌
				this.$data.brandlabel=data.label;
				this.$data.dictEmptyData.brand=data.value;
				this.$data.dictFormData.brand=data.value;
			}else{
				this.$data.queryData.series='';
				this.$data.serieslabel='';
				this.$data.queryData.series=data.code;
				this.$data.dictFormData.series=data.code;//车系
				this.$data.dictEmptyData.series=data.code;
				this.$data.serieslabel=data.label;
				this.$data.seriesId=data.value;
			}
			this.queryParamGrid();
		},
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
			//this.reminderDelte();
		},
		//查询资源表
		queryParamGrid: function () {
			this.$http.post(this.API_ROOT + '/crm/car/warning/page', this.$data.queryData,{
				params: {
					start: this.$data.curPage,
					limit: this.$data.page.pageSize
				}
			}).then((response) => {
				debugger;
				response.data.data.total =parseInt(response.data.data.total);
				this.$data.params.dataList = response.data.data.dataList; //Object.assign(this.$data. paramTabelData, response.data.dataList);
			}, (response) => { });
		},

		//新增
		add: function () {
				//查询车型
		    this.querymodel();
			//debugger;
			this.$data.dictEmptyData.modelId = '';
			this.$data.dictEmptyData.configureId = '';
			this.$data.dictFormData = Object.assign(this.$data.dictFormData, this.$data.dictEmptyData);
			this.$data.dictFormShow = true;
		},
		//编辑
		edit: function () {
			if (this.$data.multipleSelection.length == 1) {
				this.querymodel();
				var data = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/crm/car/warning/info', {
					params: {
						id: data,
					}
				}).then(function (resp) {
					// success callback
					debugger;
					this.$data.dictFormData = Object.assign(this.$data.dictFormData, resp.data.data);
					this.queryConfigure(resp.data.data.modelId);
					this.$data.dictFormShow = true;
				}, function (error) { })
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//保存参数
		saveDict: function () {
			this.$refs.dictForm.validate(function (valid) {
				if (valid) {
					debugger;
					this.$http.post(this.API_ROOT + '/crm/car/warning/addAndUpd', this.$data.dictFormData)
						.then(resp => {
							debugger;
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.queryParamTree();
								this.queryParamGrid();
								this.$data.dictFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		//资源过滤
		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		//查询参数树
		queryParamTree: function() {
				//获取资源树
				this.$http.get(this.API_ROOT + '/base/car/tree', {
					params: {
						showLevel:0,
						allFlag:true
					}
				}).then((response) => {
					debugger;
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
	    //根据车系查询车型
	    querymodel:function(){
	    	this.$http.get(this.API_ROOT + '/base/carModel/combo', {
					params: {
						seriesId:this.$data.seriesId
					}
				}).then((response) => {
					debugger;
					this.$data.modelData = response.data;
				}, (response) => {});
	    },
	    //转换预警类型
	    convertWarningType:function(row,column){
	    	if(row.warningType=='bx'){
	    	return "保险"
	    	}
	    },
	    modelchange:function(val){
//	    	console.log(val);
	    	debugger;
	    	this.queryConfigure(val);
	    	for(var i=0;i<this.$data.modelData.length ;i++){
				if(this.$data.modelData[i].value == this.$data.dictFormData.modelId)
				{
					this.$data.dictFormData.model = this.$data.modelData[i].label;
				    break;
				}
			}
	    },
	    //根据车型查询配置
	    queryConfigure:function(modelId){
	    	this.$http.get(this.API_ROOT + '/base/carConfigure/combo', {
					params: {
						modelId:modelId
					}
				}).then((response) => {
					debugger;
					this.$data.configureData = response.data;
				}, (response) => {});
	    },

	},
	//组件创建时
	created: function () {
		//查询参数树
		this.queryParamTree();
		

	}

};
</script>
<style>

</style>